<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/"/>
    <title>menu</title>
    <link rel="stylesheet" href="static/js/layui/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/layui/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset" style="width: 1396px">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="user/queryByName">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" autocomplete="off" class="layui-input">
                            </div>

                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit  lay-filter="data-search-btn" lay-event="search"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <table class="layui-table" lay-data="{
                    height:500,
                    url:'user/showUsers',
                    page:true,
                    toolbar:'#toolbarDemo',
                    limit:10,
                    limits:[10,20,50],
                     id:'munu-table'
                    }"
               lay-filter="munu-table">
            <thead>
            <tr>
                <th lay-data="{checkbox:true,fixed:'left',align:'center'}">选择</th>
                <th lay-data="{field:'id', width:60,templet:'#serial',align:'center'}">序号</th>
                <th lay-data="{field:'loginName',align:'center', width:80}">登录名称</th>
                <th lay-data="{field:'name', width:80,align:'center'}">用户名</th>
                <th lay-data="{field:'userStatus', width:100 , templet:'#setStatus',align:'center' }">状态</th>
                <th lay-data="{field:'email',align:'center' }">邮箱</th>
                <th lay-data="{field:'createDate',align:'center' }">创建时间</th>
                <th lay-data="{field:'createUser',align:'center'}">创建用户</th>
                <th lay-data="{minWidth:150,toolbar:'#auth-state',align:'center',align:'center'}">操作列</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
</div>

<%--自增序号--%>
<script type="text/html" id="serial">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>
<%--添加--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> <i class="layui-icon">&#xe654;</i>添加 </button>
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="setRole"> <i class="layui-icon">&#xe654;</i>设置角色 </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="batchDelete">  <i class="layui-icon">&#xe67e;</i>批量删除</button>
    </div>
</script>

<script type="text/html" id="setStatus">

    <%--    按钮默认关--%>
    <input type="checkbox" name="close" id="{{d.id}}"

           {{#  if(d.userStatus === 1){ }}
           checked=""
           {{#  } else { }}
           {{#  } }}

           lay-skin="switch" lay-text="正常|禁用"  lay-filter="switchTest">
    <%--    {{#  if(d.roleStatus === 1){ }}--%>
    <%--    <span style="color: #F581B1;">{{ d.roleStatus }}</span>--%>

    <%--    {{#  } else { }}--%>
    <%--    <span style="color: #F581B1;">{{ d.roleStatus }}</span>--%>


</script>

<script src="static/js/layui/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/js/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'treetable','laydate','form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var treetable = layui.treetable;
        /**
         * toolbar监听事件 添加列
         */

        table.on('toolbar(munu-table)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加用户',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['70%', '60%'],
                    content: 'user/toAddUser'
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });

                //设置角色
            } else if(obj.event === 'setRole') {
                var checkStatus = table.checkStatus('munu-table')
                    , data = checkStatus.data;
                //放id
                let ids = [];
                //放名字
                let names = [];
                data.forEach(item=>{
                    ids.push(item.id);
                    //往数组放
                    names.push(item.name);
                });
                /**
                 * 无在选择框选择
                 */
                if (ids.length==0){
                    layer.msg("请选择用户!", {icon: 4, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
                    return false;
                }else if (ids.length>1){
                    layer.msg("只能选择一个用户!", {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
                    return false;
                }
                // 监听添加操作
                var index = layer.open({
                    title: '设置角色'+names.join("&")+'角色',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['70%', '60%'],
                    content: 'user/setUserRole?id='+ids
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }

            /**
             * 批量删除
             */
            else if (obj.event === 'batchDelete') {  // 监听删除操作
                var checkStatus = table.checkStatus('munu-table')
                    , data = checkStatus.data;
                let mIds = [];

                data.forEach(item=>{
                    //将获取到的id放入mId
                        mIds.push(item.id);
                })
                layer.confirm('确定要删除吗?',function (index) {
                    $.ajax({
                        type:'post',
                        url:'user/batchDelete',
                        data:{"ids":mIds},
                        datatype:"json",

                        success:function (json){
                            if (json.statusCode==200){
                                table.reload('munu-table',{
                                    page:{curr:1}
                                },'data');
                                //关闭窗口
                                layer.closeAll();
                            }
                        }
                    });
                });
            }

        });

        table.on('tool(munu-table)', function (obj) {
            var dataTable = obj.data;//获得某一行的数据
            var layEvent = obj.event;
            console.log(dataTable)
            if (obj.event === 'del') {
                var checkStatus = table.checkStatus('munu-table'), data = checkStatus.data;
                layer.confirm('确定要删除吗?',function (index) {
                    $.ajax({
                        type:'post',
                        url:'user/deleteUser?id='+dataTable.id,
                        datatype:"json",
                        success:function (json){
                            if (json.statusCode==200){
                                //刷新页面
                                table.reload('munu-table',{
                                    page:{curr:1}
                                },'data');
                                //关闭窗口
                                layer.closeAll();
                            }
                        }
                    });
                    layer.closeAll();
                });
            }

            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑--'+dataTable.name+'--用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'role/toUpdateRole?id='+dataTable.id,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function(data){

            var rState = this.checked ? '1' : '0';
            var rId = this.id;

            $.ajax({
                type:'post',
                url:'role/updateStatus',
                datatype:'json',
                data:{"roleId":rId,"roleStatus":rState},
                success:function (json) {
                    if (json.statusCode==200){
                        table.reload('munu-table',{
                            page:{curr:1}
                        },'data');
                        layer.open({
                            type:1,
                            id:'layerDemo1',
                            content:'<div style="padding: 20px 100px;">'+json.message+'</div>',
                            btn:'关闭',
                            btnAlign:'c',
                            shade:0,
                            yes:function () {
                                layer.closeAll();
                            }
                        })
                    }
                }
            });

        });


    });


</script>
</body>
</html>
